<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="../css/sm.min.css">
    <link rel="stylesheet" href="../css/sm-extend.min.css">
    <script type="text/javascript" src="https://gitee.com/huaflower/CommonFile/raw/master/common/common.js"></script>
    
<style type="text/css">
  /*css 的样式都放在这里*/
  
</style>


</head>
<body>
<div class="page-group" style="position: relative;">

   <!-- <img width="100%" height="100%" src="../img/en_book_1.png"/> -->
    
    <input value="d反倒是" name = "dd" type="button" id = "toggle" onclick= "aa()"/>
<audio controls="controls" id="bgMusic">
    <source src="../sound/1_1.mp3">
</audio>

<audio id="bgmusic">
    <source src="../sound/2_2.mp3">
</audio>


<div id="div_container" >
</div>

</div>




<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/CommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script>


<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”

var position_data = [
{
    page_data:[
        {
            x:20.5,
            y:11.1,
            w:45.1,
            h:5.9
        },
        {
            x:20.5,
            y:18.1,
            w:45.1,
            h:5.9
        },
        {
            x:20.5,
            y:24.5,
            w:40.2,
            h:5.9
        },
        {
            x:20.5,
            y:31.0,
            w:24.3,
            h:5.9
        },
        {
            x:20.5,
            y:37.8,
            w:34.3,
            h:5.9
        },
        {
            x:20.5,
            y:45.1,
            w:48.8,
            h:5.9
        },
        {
            x:20.5,
            y:52.3,
            w:52.2,
            h:5.9
        },
        {
            x:20.5,
            y:59.1,
            w:24.3,
            h:5.9
        },
        {
            x:20.5,
            y:65.7,
            w:43.3,
            h:5.9
        },
        {
            x:20.5,
            y:72.8,
            w:24.3,
            h:5.9
        },
        {
            x:20.5,
            y:79.6,
            w:43.3,
            h:5.9
        }
    ]
}

];
  


   // 初始化区域
   $$(function () {
       
       // 跳转本地页面、前面要加上local关键字
       //native_goto('local/xx');
	//getParams("url?id=1&loginid=2");

      createCheckImage(1);

      $.init();
   });


function createCheckImage(pindex){

    if(position_data.length>0){
        for(var i = 0;i<position_data.length;i++){
            var pages = position_data[i].page_data;
            if(pindex-1 == i){

                if(pages.length>0){

                    for (var j = 0; j<pages.length; j++) {
                        var x = pages[j].x;
                        var y = pages[j].y;
                        var w = pages[j].w;
                        var h = pages[j].h;

                                var imgContainer=document.getElementById("div_container");
                                imgContainer.style.height=100+"%";

                                var div = document.createElement("div");
                                div.id ="div_btn_"+i+"_"+j;
                                div.style.width = w+"%";
                                div.style.height = h+"%";
                                div.style.border = "0px solid red";
                                // div.style.position="absolute";
                                div.style.left=x+"%";
                                div.style.position = "absolute";
                                div.style.top=y+"%";
                                console.log(div.style.height);
                                //div.style.backgroundColor="green";
                                imgContainer.appendChild(div);

                                div.onclick=function(){

                                   $("#div_container div").css('border','0px solid white');

                                   $(this).css('border','2px solid red');
                                    
                                };



                    }

                    return;
                }    
            }
            
        }
    }
    

}

function aa(){  
                if($("#bgMusic").get(0).paused){  
                    $("#bgMusic").get(0).play()   


                }else{  
                     $("#bgMusic").get(0).pause();  

$("#bgMusic2").get(0).play()                        
                }  
           }  

    
</script>
</body>
</html>